<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8">
    <title>fastmsg</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" th:href="@{css/amazeui.min.css}"/>
    <link rel="stylesheet" th:href="@{css/index.css}"/>
    <link rel="stylesheet" th:href="@{css/common.css}"/>
    <link rel="stylesheet" th:href="@{css/cssreset-min.css}"/>
    <link rel="stylesheet" th:href="@{css/fastmsg.css}"/>

    <script type="text/javascript" th:src="@{js/jquery-2.1.3.min.js}"></script>
    <script type="text/javascript" th:src="@{js/amazeui.min.js}"></script>
    <script type="text/javascript" th:src="@{js/zUI.js}"></script>
    <script type="text/javascript" th:src="@{js/jquery.slimscroll.js}"></script>
    <script type="text/javascript" th:src="@{js/util.js}"></script>
    <script type="text/javascript" th:src="@{js/wechat.js}"></script>
    <script type="text/javascript" th:src="@{js/jquery.emoticons.js}"></script>
    <script type="text/javascript" th:src="@{js/fastmsg.js}"></script>
    <script type="text/javascript" th:src="@{js/cookie.js}"></script>
    <script type="text/javascript" th:src="@{js/album.js}"></script>
    <script th:src="@{/js/sweet-alert.min.js}"></script>
</head>

<body>
<div class="box">
    <div class="wechat">
        <div class="sidestrip">
            <div class="am-dropdown" data-am-dropdown>
                <!--头像插件-->
                <div class="own_head am-dropdown-toggle background-cover"></div>
                <div class="am-dropdown-content">
                    <div class="own_head_top">
                        <div class="own_head_top_text">
                            <p class="own_name"></p>
                            <img th:src="@{images/icon/head.png}" alt=""/>
                            <p class="own_numb"></p>
                        </div>
                        <div id="head_upload" class="background-cover" th:onclick="updateUserPic()">
                        </div>
                        <input id="doc-form-file" type="file" style="display:none" accept="image/*">
                    </div>
                    <div class="own_head_bottom">
                        <!--<p><span>地区</span>江西 九江</p>-->
                        <!--<div class="own_head_bottom_img">-->
                            <!--<a><img th:src="@{images/icon/head_1.png}"/></a>-->
                            <!--<a><img th:src="@{images/icon/head_2.png}"/></a>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <!--三图标-->
            <div class="sidestrip_icon">
                <!--聊天列表-->
                <a id="si_1"></a>
                <!--好友列表-->
                <a id="si_2"></a>
                <!--程序列表-->
                <a id="si_3"></a>
            </div>

            <!--底部扩展键-->
            <div id="doc-dropdown-justify-js">
                <div class="am-dropdown" id="doc-dropdown-js" style="position: initial;">
                    <div class="sidestrip_bc am-dropdown-toggle"></div>
                    <ul class="am-dropdown-content" style="">
                        <li>
                            <a href="#"
                               data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">意见反馈</a>
                            <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
                                <div class="am-modal-dialog">
                                    <div class="am-modal-hd">意见反馈
                                        <a href="javascript: void(0)" class="am-close am-close-spin"
                                           data-am-modal-close>&times;</a>
                                    </div>
                                    <div class="am-modal-bd">
                                        意见反馈
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li><a href="#">备份与恢复</a></li>
                        <li><a href="#">设置</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--聊天列表-->
        <div class="middle on">
            <div class="wx_search">
                <input type="text" class="user_code_text" placeholder="搜索账号" th:oninput="findUserByUserName()"/>
                <button title="创建群聊" href="#"
                        data-am-modal="{target: '#doc-modal-group', closeViaDimmer: 0, width: 550, height: 425}" th:onclick="openGroupChat()">+
                </button>
            </div>
            <div class="chat_content office_text">
                <ul class="user_list">
                    <li class="chat_user_list">

                    </li>
                </ul>
            </div>
        </div>
        <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-group">
            <div class="am-modal-dialog" style="border: 1px solid gray">
                <div class="am-modal-hd">请勾选需要群聊的联系人
                    <a href="javascript: void(0)" class="am-close"
                       th:onclick="closeModal()" data-am-modal-close>&times;</a>
                </div>
                <div class="am-modal-bd" style="height: 90%">
                    <div class="css_group_friend_list">
                        <div class="css_office_text">
                            <ul class="css_friend_list">

                            </ul>
                        </div>
                    </div>
                    <div class="css_friend_selected">
                        <div>
                            <ul class="css_friend_selected_list">

                            </ul>
                        </div>
                    </div>
                    <div class="css_selected_confirm"><input id="group_name" type="text" class="group_class" placeholder="请输入群名称"/>
                        <button id="confirm" th:onclick="confirmGroup()">确认</button>
                    </div>
                </div>
            </div>
        </div>

        <!--聊天窗口-->
        <div class="talk_window">
            <div class="windows_top">
                <div class="windows_top_box">
                    <span id="friend_nickName">&nbsp;</span>
                    <ul class="window_icon">
                        <li><a href=""><img th:src="@{images/icon/icon7.png}"/></a></li>
                        <li><a href=""><img th:src="@{images/icon/icon8.png}"/></a></li>
                        <li><a href=""><img th:src="@{images/icon/icon9.png}"/></a></li>
                        <li><a href=""><img th:src="@{images/icon/icon10.png}"/></a></li>
                    </ul>
                </div>
            </div>
            <!--聊天内容-->
            <div class="windows_body" id="talkbody">
                <div class="office_text" style="height: 100%;">
                    <ul class="content" id="chatbox">

                    </ul>
                </div>
            </div>
            <!--相册-->
            <div class="windows_body_album " id="albumBody">
                <div class="office_text" style="height: 100%;overflow: auto">
                    <div class="content show_album_page">
                    </div>
                </div>
                <div class="upload_album" th:onclick="uploadAlbum()" data-am-popover="{content: '点击上传相册', trigger: 'hover focus'}">+<input id="uploadAlbum" type="file" multiple="multiple" style="display:none" accept="image/*"/></a></div>
            </div>

            <div class="windows_input" id="talkbox">
                <div class="input_icon">
                    <a class="trigger" href="javascript:"></a>
                    <a th:onclick="uploadPic()">
                        <input id="uploadPic" type="file" style="display:none" accept="image/*"/></a>
                    <a th:onclick="uploadFile()">
                        <input id="uploadFile" type="file" style="display:none"/>
                    </a>
                </div>
                <div class="input_box">
                    <textarea name="" rows="" cols="" id="input_box"></textarea>
                    <button id="send" onclick="send(2, 'font', null, userPic)">发送（S）</button>
                    <!--<div id="input_box" contentEditable="true" ondrop="drop(event)" ondragover="dragover(event)" ondragleave="dragleave(event)">-->

                    <!--</div>-->
                    <!--<button id="send" onclick="send(2)">发送</button>-->
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var serverIp = "[[${serverIP}]]";
    var userId = "[[${userId}]]";
    var userName = "[[${userName}]]";
    var userCode = "[[${userCode}]]";
    var userPic = "[[${userPic}]]";
    $(".own_head").css("background", 'url(' + userPic + ')');
    $("#head_upload").css("background", 'url(' + userPic + ')');
    $(".own_numb").html('账号:' + userCode);
    $(".own_name").html(userName);
</script>
</body>
</html>
